<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft">
      <template #title>
        <div style="color: #fff">房屋管理</div></template
      ></van-nav-bar
    >
    <div class="container" v-if="!list.length">
      <img src="http://liufusong.top:8080/img/not-found.png" />
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        v-for="value in list"
        :key="value.houseCode"
        :thumb="'http://liufusong.top:8080' + value.houseImg"
        @click="detail('/detail', value.houseCode)"
      >
        <template #title>
          <div>
            <strong style="font-size: 16px">{{ value.title }} </strong>
          </div>
        </template>
        <template #price>
          <div style="color: #fa5943">
            <strong style="font-size: 16px">1 </strong>元/月
          </div>
        </template>
        <template #desc>
          <div style="color: #babdbe">
            <div>{{ value.desc }}</div>
          </div>
        </template>
        <template #tags>
          <div style="background-color: #e1f5f8; width: 40px; height: 18px">
            <div style="color: #52c6d4">{{ value.tags[0] }}</div>
          </div>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { reviewRelease } from '@/api/article'

export default {
  name: 'hire-page',
  data () {
    return {
      list: [],
      loading: false,
      finished: false
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    detail (path, id) {
      this.$router.push({
        path,
        query: {
          id
        }
      })
    },
    async onLoad () {
      const data = await reviewRelease()
      this.list = [...this.list, ...data.body]
      // 获取数据成功以后将loading修改为false，以便于下次加载获取数据
      this.loading = false
      if (this.list.length >= data.body.length) {
        // 将finished变量改为true，不再触发load事件
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: #15b572;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  img {
    width: 150px;
    margin: 30px 0;
  }
}
</style>
